<template>
  <div>
    <div v-show="isShowImg" class="c-pz100 c-pt36 ">
      <div class="c-translucent-balck70 c-pf c-p-t0 c-p-b0 c-p-l0 c-p-r0 c-pz100 c-w100 c-h100vh" @click="colse"></div>
      <div class="c-pf c-translate-xy-50 c-p-tp50 c-p-lp50 c-ww500 c-pz101 c-content-auto c-h90vh">
        <img src="" class="c-w100" id="shareImg" />
        <div class="c-textAlign-c c-fc-white c-mt20 c-pb30">
          <div class="c-fs24">长按图片保存相册后再分享给好友</div>
          <div class="iconClose c-mt20" @click.stop="colse">
            <i class="iconfont icon-buoumaotubiao20 c-fs44" />
          </div>
        </div>
      </div>
    </div>
    <div id="shareCanvas" class="c-ww640 c-pa c-pz-999 c-p-lm1000 c-p-tm999">
      <div class="c-w100 c-p">
        <img class="c-w100 c-minh360" :src="postData.poster" />
        <div v-if="postData.showHeader == 1" class="c-flex-row c-pa c-aligni-start c-p-t24 c-p-l24">
          <img class="c-ww60 c-hh60 c-brp50" :src="headimgurl" alt="头像"/>
          <div class="c-fs20 c-fc-white c-flex-column c-ml16 c-mt2">
            <span class="c-fw-b c-hh32 c-lh28">{{ nickname }}</span>
            <span class="">邀请你加入</span>
          </div>
        </div>
        <div class="c-pa c-bg-white c-ww168 c-hh168 c-ph4 c-pv4 c-p-b28 c-p-r28">
          <img class="c-ww160 c-hh160 c-br4" :src="qrcodeImg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

let html2canvas = null;
export default {
  components:{},

  props:{
    postData: {
    type: Object,
    default: () => {},
  },
  },

  data() {
    return {
      isShowImg:false,
      qrcodeImg:'',
      headimgurl: localStorage.getItem("userHeadImg"),
      nickname: localStorage.getItem("userName"),
    }
  },
  mounted() {
    this.$loading.show({
      text: "海报生成中..."
    });
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      html2canvas = res.default;
      this.baseToUrl(this.postData.qrcodeUrl);
      let timer = null
      timer = setTimeout(() => {
        this.startCanvas();
        clearTimeout(timer)
        timer = null
      }, 1000);
    })
    // 十秒后还没关掉loading，自动关闭
    let loadingTimer = null
    loadingTimer = setTimeout(() => {
      this.$loading.hide();
      clearTimeout(loadingTimer)
      loadingTimer = null
    }, 10000);
  },
  methods:{
    colse() {
      this.$emit('colse');
    },
    canvasToImage(ctx) {
      try {
        const dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        if (document.getElementById("shareImg")) {
          document.getElementById("shareImg").setAttribute("src", dataURL);
        }
        this.$loading.hide();
        this.isShowImg = true;
      } catch (err) {
        console.log(err.message);
        console.log(err.stack);
        this.$loading.hide();
      }
    },
    startCanvas() {
      const domTest = document.getElementById("shareCanvas");
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        backgroundColor: 'rgba(0, 0, 0, 0)',
      }).then((canvas) => {
        const ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    baseToUrl(val) {
      // 防止ios 二维码截图不全
      const url = val.replace(`width="360" height="360"`, `width="97" height="97"`);
      this.qrcodeImg = `data:image/svg+xml;base64,${window.btoa(decodeURIComponent(encodeURIComponent(url)))}`;
    }
  },

}
</script>

<style scoped>

</style>